<template>
	<view class="storecontent">
		<image class="bg" src="../../static/shanghubj.png"></image>
		<div class="storeInfoWrapper">
			<view class="storename">{{storeinfo.Name}}</view>
			<view class="storestatus" v-on:click="onStoreStatus()" :class="{xx:store_status_str=='停止营业'}">{{store_status_str}}</view>
			<view class="storechange" v-on:click="onChangeStore()">切换店铺</view>
			<view class="lightbox">
				<view class="open" v-on:click="onOpenLight">开灯</view>
				<view class="close" v-on:click="onCloseLight">关灯</view>
			</view>
		</div>
		<view class="moneyWrapper">
			<view class="title">账户余额</view>
			<view class="money">{{(balance/100).toFixed(2)}}</view>
			<view class="button" v-on:click="onCashout()">去提现</view>
		</view>
		<view class="menuWrapper">
			<view v-for="item in menus" class="item" v-on:click="bindItem(item.key)">
				<image mode="aspectFit" class="item-icon" :src="item.icon"></image>
				<view class="item-title">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../common/http.js';
	export default {
		data() {
			return {
				storelist:[],
				curStoreIndex:0,
				storeinfo:{},
				storeid:'',
				store_status:0,
				store_status_map:['正常营业','停止营业'],
				store_status_str:'',
				balance:"0",
				menus:[
					{
						"title":"商品管理",
						"key":"shoplist",
						"icon":"../../static/chaoshiguanli.png"
					},
					{
						"key":"orderlist",
						"title":"七日订单",
						"icon":"../../static/shiridingdan.png"
					},
					{
						"key":"inout",
						"title":"出入记录",
						"icon":"../../static/churujilu.png"
					},
					{
						"key":"cashout",
						"title":"现金记录",
						"icon":"../../static/tixianjilu.png"
					},
					{
						"key":"dianpu",
						"title":"店铺信息",
						"icon":"../../static/dianpuxinxi.png"
					},
					{
						"key":"caiwu",
						"title":"财务管理",
						"icon":"../../static/caiwuguanli.png"
					},
					{
						"key":"shebei",
						"title":"摄像头",
						"icon":"../../static/shextou.png"
					},
					{
						"key":"staff",
						"title":"员工管理",
						"icon":"../../static/yuangongguanli.png"
					},
					{
						"key":"cash",
						"title":"收款",
						"icon":"../../static/yuangongguanli.png"
					},
					{
						"key":"logout",
						"title":"退出登录",
						"icon":"../../static/tuichudenglu.png"
					},
				]
			}
		},
		onLoad(options) {
			var self = this
			this.storeid = options.storeid
			self.refreshStore()
			
			http.get("/store/videos", {"storeid":this.storeid}, (res)=>{
				console.log(res)
			})
		},
		onShow() {
			this.refreshStore()
		},
		methods: {
			refreshStore(){
				var self = this
				http.get("/store/storeinfo", {"storeid":this.storeid}, (res)=>{
					self.storeinfo = res
					console.log(res)
					self.changeStoreStatus(self.storeinfo.Closed)
				})
				
				http.get("/store/userinfo",{"storeid":this.storeid}, (res)=>{
					self.balance = res.Balance
				})
			},
			bindItem(key) {
				console.log(key)
				var self = this
				if (key == "orderlist") {
					uni.navigateTo({
						url:"../orderlist/orderlist?storeid="+self.storeinfo.Id
					})
				}
				if (key == "cashout") {
					uni.navigateTo({
						url:"../cashoutlist/cashoutlist?storeid="+self.storeinfo.Id
					})
				}
				if (key == "inout") {
					uni.navigateTo({
						url:"../inout/inout?storeid="+self.storeinfo.Id
					})
				}
				if (key == "tiaokuan") {
					uni.navigateTo({
						url:"../tiaokuan/tiaokuan?storeid="+self.storeinfo.Id
					})
				}
				if (key == "shoplist") {
					uni.navigateTo({
						url:"../shoplist/shoplist?storeid="+self.storeinfo.Id
					})
				}
				if (key == "dianpu") {
					console.log("111")
					uni.navigateTo({
						url:"../dianpu/dianpu?storeid="+self.storeinfo.Id
					})
				}
				if (key == "caiwu") {
					uni.navigateTo({
						url:"../caiwu/caiwu?storeid="+self.storeinfo.Id
					})
				}
				if (key == "shebei") {
					uni.navigateTo({
						url:"../shebei/shebei?storeid="+self.storeinfo.Id
					})
				}
				if (key == "staff") {
					uni.navigateTo({
						url:"../bindstafflist/bindstafflist?storeid="+self.storeinfo.Id
					})
				}
				if (key == "cash") {
					uni.navigateTo({
						url:"../cash/cash?storeid="+self.storeinfo.Id
					})
				}
				if (key == "supply") {
					uni.navigateTo({
						url:"../bindstafflist/bindstafflist?storeid="+self.storeinfo.Id
					})
				}
				if (key == "logout") {
					uni.clearStorageSync()
					uni.redirectTo({
						url:"../index/index"
					})
				}
			},
			onChangeStore() {
				uni.redirectTo({
					url:"../storelist/storelist"
				})
			},
			onCashout() {
				uni.navigateTo({
					url:"../cashout/cashout"
				})
			},
			onStoreStatus () {
				var self = this
				http.post("/store/storestatus", {"storeid":this.storeid}, (res)=>{
					self.changeStoreStatus(res)
				}, "正在切换营业状态")
			},
			changeStoreStatus(status) {
				this.store_status = status	
				this.store_status_str = this.store_status_map[status]
			},
			onOpenLight() {
				http.post("/store/openlight", {"storeid":this.storeid}, (res)=>{
					uni.showToast({
						title:"开启成功"
					})
				})
			},
			onCloseLight() {
				http.post("/store/closelight", {"storeid":this.storeid}, (res)=>{
					uni.showToast({
						title:"关闭成功"
					})
				})
			}
		}
	}
</script>

<style>
	.storecontent {
		width: 100%;
		height: 100%;
	}
	.bg {
		height: 190px;
		width: 100%;
	}
	.storestatus {
		position: absolute;
		color: #EDC469;
		left: 50px;
		top: 50px;
		font-size: 18px;
	}
	.xx {
		color: #FD847A;
	}
	.menuWrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}
	.menuWrapper .item {
		width: 25%;
		text-align: center;
		margin-top: 20px;

	}
	.item-icon {
		width: 50px;
		height: 50px;
	}
	.item-title {
		height: 18px;
		font-size: 15px;
		font-size: 200;
		
	}

	.moneyWrapper {
		margin-top: 40px;
		position: relative;
		padding: 10px 10px;
		box-sizing: border-box;
		width: 90%;
		margin-left: 5%;
		height: 60px;
		background: #FFFFFF;
		border-radius: 10px;
		background-color: white;
		overflow: hidden;
		background-image: url(../../static/tixianbeiji.png);
		background-size: 100% 100%;
	}
	.moneyWrapper .title {
		font-size: 13px;
		position: absolute;
		color: #885E24;
		left: 15px;
		top: 10px;
	}
	.moneyWrapper .money {
		color:#000000;
		font-size: 20px;
		position: absolute;
		top: 28px;
		left: 15px;
	}
	.moneyWrapper .button {
		position: absolute;
		right: 15px;
		border-radius: 15px;
		border: 1px solid #885E24;
		color: #885E24;
		top: 12px;
		width: 80px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;

	}
	.storeInfoWrapper {
		position: absolute;
		height: 120px;
		width: 90%;
		left: 5%;
		background-color: white;
		box-shadow: 0px 0px 22px 2px rgba(166, 174, 195, 0.25);
		border-radius: 10px;
		top: 90px;
		overflow: hidden;
		background-image: url(../../static/dianpu.png);
		background-size: 100% 100%;
	}
	
	.storeInfoWrapper .beijing, .moneyWrapper .beijing {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: 0;
	}
	.storeInfoWrapper .light {
		position: absolute;
		right: 15px;
		top: 10px;
		font-size: 16px;
		background-color: #52CBC6;
		color: white;
		padding: 5px 5px;
		border-radius: 10px;
		width: 80px;
		text-align: center;
		height: 28px;
		border-radius: 20px;
		line-height: 28px;
	}
	.storeicon {
		position: absolute;
		left: 20px;
		top: 20px;
		width: 20px;
		height: 20px;
	}
	.storename {
		position: absolute;
		top: 15px;
		font-size: 23px;
		left: 50px;
		color: #333333;
		font-weight: bold;
	}
	.storechange {
		position: absolute;
		right: 15px;
		bottom: 20px;
		font-size: 16px;
		background-color: #52CBC6;
		color: white;
		padding: 5px 5px;
		border-radius: 10px;
		width: 80px;
		text-align: center;
		height: 28px;
		border-radius: 20px;
		line-height: 28px;
	}
	.lightbox {
		font-size: 12px;
		position: absolute;
		bottom: 5px;
		display: flex;
		padding-left: 50px;
		color: white;
		font-size: 18px;
	}
	.lightbox .open {
		margin-right: 15px;
		background-color: #52CBC6;
		padding: 5px 5px;
		border-radius: 20px;
		width: 80px;
		box-sizing: border-box;
		text-align: center;
	}
	.lightbox .close {
		color: white;
		background-color: #EDC469;
		padding: 5px 5px;
		border-radius: 20px;
		width: 80px;
		box-sizing: border-box;
		text-align: center;
	}
</style>
